﻿<div class="layui-card" id="lg-apply-stats">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>报名数据统计</div>
    <div class="layui-card-body" id="">
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item">
                <lg-form-date :data="{Title:'学年',Name:'Year'}" v-model:value="where.Year" format="year"></lg-form-date>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'学期',Options:[{Text:'不限',Value:''},{Text:'1',Value:1},{Text:'2',Value:2}]}" v-model:value="where.Semester" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-daterange :data="{Title:'日期',Name:'AddTime'}" v-model:value="where.DateRange"></lg-form-daterange>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="getPlans">搜索</button>
            </div>
        </div>
        <div class="lg-form-box">
            <div class="lg-stats-department" v-for="xb in department" v-if="department.length>0">
                <div class="gradeTitle" >{{xb.Name}}</div>
                <div class="statsTitle">年级统计</div>
                <div>
                    <lg-table-stats title="年级" :data="getGradeStats(xb.Id)"></lg-table-stats>
                </div>
                <div class="spaceBox"></div>
                <div class="statsTitle">计划统计</div>
                <div>
                    <lg-table-stats title="计划" :data="getPlanStats(xb.Id)"></lg-table-stats>
                </div>
            </div>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        plans: [],
                        grades: [],
                        where: {
                            Page: 1,
                            Limit: 10,
                            Year: "",
                            Semester: "1",
                            DataRange: ""
                        }
                    }
                },
                computed: {
                    department: function() {
                        var arry = this.grades.filter(p => p.Depth == 1);
                        console.log(arry);
                        return arry;
                    }
                },
                mounted: function() {
                    this.getGrades();
                    this.getPlans();
                },
                methods: {
                    getGrades: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        this.grades = res.data;
                                    } else {
                                        this.grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    getPlans: function() {
                        lg.request({
                            url: "/api/sys/apply/GetRegisterFromPlan",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        this.plans = res.data;
                                    } else {
                                        this.plans = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    getGradeStats: function(fid) {
                        var rows = [];
                        var grades = this.grades.filter(p => p.FatherId == fid);
                        for (let i in grades) {
                            var obj = { title: grades[i].Name, register: 0, prePass: 0, pay: 0,cancelPay:0, newStudent: 0 };
                            var sub = this.grades.filter(p => p.IdPath.split(',').indexOf(grades[i].Id + "") > -1);
                            for (let i in this.plans) {
                                var plan = this.plans[i];
                                if (sub.filter(p => p.Id == plan.GradeId).length > 0) {
                                    obj.register += plan.Register || 0;
                                    obj.prePass += plan.PrePass || 0;
                                    obj.pay += plan.Pay || 0;
                                    obj.cancelPay += plan.CancelPay || 0;
                                    obj.newStudent += plan.NewStudent || 0;
                                }
                            }
                            rows.push(obj);
                        }
                        var sum = { title:"合计", register: 0, prePass: 0, pay: 0,cancelPay:0, newStudent: 0 };
                        for (let i in rows) {
                            sum.register += rows[i].register;
                            sum.prePass += rows[i].prePass;
                            sum.pay += rows[i].pay;
                            sum.cancelPay += rows[i].cancelPay;
                            sum.newStudent += rows[i].newStudent;
                        }
                        rows.push(sum);
                        return rows;
                    },
                    getPlanStats: function(gid) {
                        var rows = [];
                        var sub = this.grades.filter(p => p.IdPath.split(',').indexOf(gid + "") > -1);
                        for (let i in this.plans) {
                                var plan = this.plans[i];
                                if (sub.filter(p => p.Id == plan.GradeId).length > 0) {
                                    rows.push({title: plan.Title, register: plan.Register, prePass: plan.PrePass||0, pay:plan.Pay|| 0,cancelPay:plan.CancelPay||0, newStudent:plan.NewStudent|| 0 })
                                }
                            }
                        var sum = { title:"合计", register: 0, prePass: 0, pay: 0,cancelPay:0, newStudent: 0 };
                        for (let i in rows) {
                            sum.register += rows[i].register;
                            sum.prePass += rows[i].prePass;
                            sum.pay += rows[i].pay;
                            sum.cancelPay += rows[i].cancelPay;
                            sum.newStudent += rows[i].newStudent;
                        }
                        rows.push(sum);
                        return rows;
                    },
                    reload: function() {
                        this.laytable.reload();
                    }
                }
            });
            freeForm.regComponent(this.vm);
            this.vm.component("lg-table-stats", {
                props: {
                    title: {
                        type: String
                    },
                    data: {
                        type: Object,
                        default: {}
                    }
                },
                template: `
                        <table class="lg-table">
                           <thead>
                               <tr>
                                    <th>{{title}}</th>
                                    <th>已报</th>
                                    <th>预录</th>
                                    <th>缴费</th>
                                    <th>退费</th>
                                    <th>新生</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in data">
                                    <td>{{item.title}}</td>
                                    <td>{{item.register}}</td>
                                    <td>{{item.prePass}}</td>
                                    <td>{{item.pay}}</td>
                                    <td>{{item.cancelPay}}</td>
                                    <td>{{item.newStudent}}</td>
                                </tr>
                            </tbody>
                        </table>
                        `
            })
            this.vm.mount("#lg-apply-stats")
        },
    }).mount();

</script>
